<!-- components/MessageInput.vue -->
<template>
    <div class="message-input-container">
      <div class="input-wrapper relative">
        <!-- 多行文本输入框 -->
        <textarea
          ref="textareaRef"
          v-model="localValue"
          :disabled="loading"
          :placeholder="placeholder"
          class="message-textarea w-full px-6 py-4 border-2 border-blue-200 rounded-2xl focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-300 bg-white text-blue-800 placeholder-blue-400/70 resize-none transition-all duration-300 shadow-sm"
          :class="{ 
            'loading': loading,
            'pr-20': localValue
          }"
          rows="1"
          @keydown="handleKeydown"
          @input="handleInput"
        />
        
        <!-- 发送按钮（悬浮在输入框内） -->
        <button
          v-if="localValue"
          @click="handleSend"
          :disabled="loading || !localValue.trim()"
          class="absolute right-3 bottom-3 w-10 h-10 bg-gradient-to-br from-blue-500 to-blue-600 text-white rounded-xl flex items-center justify-center transition-all duration-300 hover:from-blue-600 hover:to-blue-700 hover:shadow-md hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100"
        >
          <svg v-if="!loading" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7" />
          </svg>
          <div v-else class="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
        </button>
      </div>
      
      <!-- 操作按钮区域 -->
      <div class="action-buttons flex justify-between items-center mt-4">
        <div class="flex space-x-2">
          <button
            @click="handleClear"
            :disabled="loading"
            class="flex items-center px-4 py-2.5 bg-gradient-to-r from-red-50 to-pink-50 border border-red-200 rounded-2xl text-red-600 font-medium transition-all duration-300 hover:from-red-100 hover:to-pink-100 hover:shadow-md hover:scale-105 disabled:opacity-50"
          >
            <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
            </svg>
            清空对话
          </button>
          
          <button
            @click="handleAttach"
            :disabled="loading"
            class="flex items-center px-4 py-2.5 bg-gradient-to-r from-green-50 to-emerald-50 border border-green-200 rounded-2xl text-green-600 font-medium transition-all duration-300 hover:from-green-100 hover:to-emerald-100 hover:shadow-md hover:scale-105"
          >
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
            </svg>
            添加附件
          </button>
        </div>
        
        <div class="text-xs text-blue-500/70 flex items-center">
          <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          Enter发送，Shift+Enter换行
        </div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  interface Props {
    modelValue: string
    loading?: boolean
    placeholder?: string
  }
  
  interface Emits {
    (e: 'update:modelValue', value: string): void
    (e: 'send'): void
    (e: 'clear'): void
    (e: 'attach'): void
  }
  
  const props = withDefaults(defineProps<Props>(), {
    loading: false,
    placeholder: '输入您的问题...'
  })
  
  const emit = defineEmits<Emits>()
  
  const localValue = ref('')
  const textareaRef = ref<HTMLTextAreaElement>()
  
  // 同步父组件的值
  watch(() => props.modelValue, (newVal) => {
    if (newVal !== localValue.value) {
      localValue.value = newVal
    }
  }, { immediate: true })
  
  // 更新父组件的值
  watch(localValue, (newVal) => {
    if (newVal !== props.modelValue) {
      emit('update:modelValue', newVal)
    }
  })
  
  // 自动调整文本域高度
  const adjustTextareaHeight = () => {
    const textarea = textareaRef.value
    if (textarea) {
      textarea.style.height = 'auto'
      textarea.style.height = Math.min(textarea.scrollHeight, 150) + 'px' // 最大高度150px
    }
  }
  
  // 处理输入事件
  const handleInput = () => {
    adjustTextareaHeight()
  }
  
  // 处理键盘事件
  const handleKeydown = (event: KeyboardEvent) => {
    if (event.key === 'Enter') {
      if (event.shiftKey) {
        // Shift+Enter: 换行
        return
      } else {
        // Enter: 发送消息（无Shift）
        event.preventDefault()
        handleSend()
      }
    }
  }
  
  // 发送消息
  const handleSend = () => {
    if (!localValue.value.trim() || props.loading) return
    emit('send')
  }
  
  // 清空输入
  const handleClear = () => {
    localValue.value = ''
    emit('clear')
    adjustTextareaHeight()
  }
  
  // 添加附件
  const handleAttach = () => {
    emit('attach')
  }
  
  // 聚焦到输入框
  const focus = () => {
    textareaRef.value?.focus()
  }
  
  // 暴露方法给父组件
  defineExpose({
    focus
  })
  
  onMounted(() => {
    adjustTextareaHeight()
  })
  </script>
  
  <style scoped>
  .message-input-container {
    width: 100%;
  }
  
  .input-wrapper {
    position: relative;
  }
  
  .message-textarea {
    min-height: 60px;
    max-height: 150px;
    transition: all 0.3s ease;
  }
  
  .message-textarea:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  }
  
  .message-textarea.loading {
    opacity: 0.7;
    cursor: not-allowed;
  }
  
  /* 暗色模式支持 */
  @media (prefers-color-scheme: dark) {
    .message-textarea {
      background: rgba(255, 255, 255, 0.05);
      border-color: rgba(59, 130, 246, 0.3);
      color: white;
    }
  }
  </style>